<template>
	<view class="noticeItem" v-if="isShow">
		<view class="header">
			<view class="point"></view>
			<view class="title">公告</view>
		</view>
		<view class="content">
			<view class="main-ctn">
				{{content}}
			</view>
			<view class="confirm-btn" @click="closePop">确认</view>
			<view class="tip" @click="noShow">1天内不再提示</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	let props = defineProps({
		isShow: {
			type: Boolean,
			default: false
		},
		content: {
			type: String,
			default: "默认公告"
		}
	})
	const noShow = () => {
		closePop()
		const currentTime = new Date().getTime();
		uni.setStorageSync('lastClickTime', currentTime);
	}
	const emits = defineEmits(['closePop'])
	const closePop = () => {
		emits('closePop', false)
	}
</script>

<style lang="scss" scoped>
	.noticeItem {
		padding: 10rpx;
		position: fixed;
		width: 80%;
		max-height: 500rpx;
		background: #fff;
		z-index: 999;
		top: calc((100% - 400rpx) / 2);
		left: 10%;
		box-shadow: 0 3rpx 8rpx #eee;
		border-radius: 20rpx;
		overflow: hidden;

		.header {
			padding: 20rpx;
			display: flex;
			align-items: center;

			.point {
				width: 10rpx;
				height: 30rpx;
				background-color: $theme-color;
				border-radius: 10rpx;
			}

			.title {
				margin-left: 20rpx;
				font-weight: 600;
			}
		}

		.content {
			padding: 20rpx;

			.confirm-btn {
				padding: 20rpx;
				background-color: $theme-color;
				text-align: center;
				color: #fff;
				font-size: 26rpx;
				border-radius: 10rpx;
				margin-top: 40rpx;
			}

			.tip {
				color: $theme-second-color;
				font-size: 20rpx;
				display: flex;
				justify-content: flex-end;
				padding: 10rpx;
				margin-top: 10rpx;
				float: right;
			}
		}
	}
</style>